<script setup lang="ts">
import { ref } from 'vue'
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import { placeholderImages } from '../../assets/images/placeholder'
import { useRouter } from 'vue-router'

const currentIndex = ref(0)
const carouselRef = ref()
// const showDebug = ref(false) // 调试模式开关

// 处理轮播图变化事件
const handleCarouselChange = (index: number) => {
  // console.log('轮播图切换到索引:', index)
  currentIndex.value = index
}

// 设置当前活动项
const setActiveItem = (index: number) => {
  // console.log('设置活动项:', index)
  currentIndex.value = index
  if (carouselRef.value) {
    carouselRef.value.setActiveItem(index)
  }
}

// 切换到上一张
const prev = () => {
  // console.log('切换到上一张')
  if (carouselRef.value) {
    carouselRef.value.prev()
  }
}

// 切换到下一张
const next = () => {
  // console.log('切换到下一张')
  if (carouselRef.value) {
    carouselRef.value.next()
  }
}

// 轮播图数据 - 直接使用图片URL
const banners = [
  {
    image: placeholderImages.banners[0],
    keyword: '百货'
  },
  {
    image: placeholderImages.banners[1],
    keyword: '女装'
  },
  {
    image: placeholderImages.banners[2],
    keyword: '手机'

  },
  {
    image: placeholderImages.banners[3],
    keyword: '家电'
  }
]

// 搜索
const router = useRouter()
const goSearch = (keyword: string) => {
  if (!keyword) return
  router.push({
    name: 'SearchResults',
    query: { keyword }
  })
}

</script>

<template >
  <div class="banner-carousel">
    <el-carousel 
      :interval="4000" 
      height="400px"
      :autoplay="true"
      indicator-position="none"
      arrow="never"
      @change="handleCarouselChange"
      ref="carouselRef"
    >
      <el-carousel-item v-for="(item, index) in banners" :key="index">
        <div class="banner-content" :style="{ backgroundImage: `url(${item.image})` }"
        @click="goSearch(item.keyword)">
        
        </div>
      </el-carousel-item>
    </el-carousel>
    
    <!-- 自定义左右箭头 -->
    <div class="carousel-arrow carousel-arrow-left" @click="prev">
      <el-icon><ArrowLeft /></el-icon>
    </div>
    <div class="carousel-arrow carousel-arrow-right" @click="next">
      <el-icon><ArrowRight /></el-icon>
    </div>
    
    <!-- 底部指示器 -->
    <div class="banner-indicators">
      <span 
        v-for="(_, index) in banners" 
        :key="index" 
        :class="['indicator', { active: currentIndex === index }]"
        @click="setActiveItem(index)"
      ></span>
    </div>
  </div>
</template>



<style lang="scss" scoped>
.banner-carousel {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #e6f1ff;
  border-radius: 0.5rem;
  overflow: hidden;
   align-items: center;
    justify-content: center;
  .banner-content {
    position: absolute;
    height: 75%;
    width: 100%;
    background-size: cover;
    background-position: 80%;
    background-repeat: no-repeat;
    display: flex;
   
    // padding: 0 3.125rem;
    // border-radius: 0.5rem;
    position: relative;
    overflow: hidden; // 添加overflow hidden确保图片不会超出容器边界
  }
  
  .banner-indicators {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.625rem;
    z-index: 100;
    
    .indicator {
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.5);
      cursor: pointer;
      transition: all 0.3s;
      
      &.active {
        background-color: #e07676;
        width: 1.125rem;
        border-radius: 0.25rem;
      }
      
      &:hover {
        background-color: rgba(255, 255, 255, 0.8);
      }
    }
  }
  
  /* 自定义箭头样式 */
  .carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.25rem;
    height: 2.25rem;
    background-color: rgba(224, 118, 118, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 30;
    color: white;
    transition: all 0.3s;
    
    &:hover {
      background-color: rgba(224, 118, 118, 0.9);
      transform: translateY(-50%) scale(1.1);
    }
    
    &-left {
      left: 1.25rem;
    }
    
    &-right {
      right: 1.25rem;
    }
    
    .el-icon {
      font-size: 1.25rem;
    }
  }
  
  /* 覆盖Element Plus的样式 */
  :deep(.el-carousel__item) {
    border-radius: 0.5rem;
  }
  
  :deep(.el-carousel__container) {
    height: 100%;
  }
  
  :deep(.el-carousel__indicators) {
    display: none; // 隐藏默认指示器
  }
}
</style>
